<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>锤子出品必属精品</title>
    <link rel="icon" type="images/x-icon" href="images/favicon.ico">
    <link rel="stylesheet" href="images/font_2693205_tnz9q62nqa8/iconfont.css">
    <link rel="stylesheet" href="css/goodsinfo.css">
</head>

<body>
    <header>
        <span class="iconfont icon-chuizi chuizi"></span>
        <ul>
            <li class="li">
                <a href="#">在线商城</a>
            </li>
            <li>
                <a href="#">坚果R2</a>
            </li>
            <li>
                <a href="topic.html">Smartisan TNT go</a>
            </li>
            <li>
                <a href="#">坚果 TNT 工作站</a>
            </li>
            <li>
                <a href="#">Smartisan OS</a>
            </li>
            <li>
                <a href="#">欢喜云</a>
            </li>
            <li>
                <a href="#">应用</a>
            </li>
            <li>
                <a href="#">论坛</a>
            </li>
            <li>
                <a href="#">开发者支持</a>
            </li>
            <li>
                <a href="#">荣誉与奖项</a>
            </li>
            <li>
                <a href="#">加入我们</a>
            </li>
            <li>
                <a href="#">下载APP</a>
            </li>
        </ul>
        <div class="header_right">
            <a href="load.html" id="load">
                <span class="iconfont icon-denglu denglu"></span>
            </a>
            <a href="#" id="hicart">
                <span id="hongdian"></span>
                <span class="iconfont icon-gouwudai gouwudai" id="goodscart"></span>
                <div class="header_cart">
                    <div class="list-container">
                        <div class="cart-empty">
                            <p class="desc">
                                购物车为空
                            </p>
                            <p class="desc-prompt">
                                您还没有选购任何商品，现在前往商城选购吧！
                            </p>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </header>
    <nav>
        <div class="nav">
            <ul class="nav_right">
                <li class="nav_li">首页
                    <div class="nav_bottom">
                        <div>
                            <ul>
                                <span>手机</span>
                                <li>
                                    <img src="images/shouji.webp" alt="">
                                    <a href="">手机</a>
                                </li>
                            </ul>
                            <ul>
                                <span>官方配件</span>
                                <li>
                                    <img src="images/lanya.webp" alt="">
                                    <a href="">蓝牙耳机</a>
                                </li>
                                <li>
                                    <img src="images/shujuxian.webp" alt="">
                                    <a href="">数据线</a>
                                </li>
                                <li>
                                    <img src="images/chongdianqi.webp" alt="">
                                    <a href="">充电器</a>
                                </li>
                                <li>
                                    <img src="images/yidongdianyuan.webp" alt="">
                                    <a href="">移动电源</a>
                                </li>
                            </ul>
                            <span></span>
                            <ul>
                                <li>
                                    <img src="images/paizhao.webp" alt="">
                                    <a href="">拍照配件</a>
                                </li>
                            </ul>
                        </div>

                    </div>
                </li>
                <li>坚果手机
                    <div class="nav_bottom"></div>
                </li>
                <li>TNT
                    <div class="nav_bottom"></div>
                </li>
                <li>官方自营
                    <div class="nav_bottom"></div>
                </li>
                <li>服务
                    <div class="nav_bottom">
                        <ul class="nav_bottom_ul">
                            <li>
                                <img src="images/baozhang.png" alt="">
                                <p>保修服务</p>
                            </li>
                            <li>
                                <img src="images/kefu.png" alt="">
                                <p>在线客服</p>
                            </li>
                            <li>
                                <img src="images/fuwu.png" alt="">
                                <p>服务政策</p>
                            </li>
                            <li>
                                <img src="images/shouhou.png" alt="">
                                <p>发起售后</p>
                            </li>
                            <li>
                                <img src="images/weixiu.png" alt="">
                                <p>维修门店</p>
                            </li>
                            <li>
                                <img src="images/zizu.png" alt="">
                                <p>自助服务</p>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
            <div class="nav_left">
                <span class="iconfont icon-sousuo"></span>
                <input type="search" class="left_middle" placeholder="">
                <div class="left_right">
                    <a href="" class="a1">坚果&nbsp;R2</a>
                    <a href="" class="a2">TNT</a>
                </div>
                <div class="left_bottom">
                    <img src="images/sanjiaoxing.png" alt="">
                    <ul>
                        <li>坚果&nbsp;R2</li>
                        <li>蓝牙耳机</li>
                        <li>TNT</li>
                        <li>移动电源</li>
                        <li>坚果快充</li>
                        <li>坚果快充</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="nav_right1">
            <a href="load.html" class="load">
                <span class="iconfont icon-denglu denglu"></span>
            </a>
            <a href="" class="hicart">
                <span id="hongdian"></span>
                <span class="iconfont icon-gouwudai gouwudai"></span>
                <div class="header_cart1">
                    <div class="list-container">
                        <div class="cart-empty">
                            <p class="desc">
                                购物车为空
                            </p>
                            <p class="desc-prompt">
                                您还没有选购任何商品，现在前往商城选购吧！
                            </p>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </nav>
    <section class="goodsinfo">
        <div class="info-left">
            <div class="small">
                <img src="images/tntlv.webp" alt="" style="width: 300px;">
                <div class="mask"></div>
            </div>
            <div class="big">
                <img src="images/tntlv.webp" alt="" style="position: absolute;width: 500px;">
            </div>
        </div>
        <div class="info-right">
            <article class="item-title">
                <h1>Smartisan TNT go</h1>
                <h2>欢迎使用下—代电脑</h2>
                <div class="item-price">
                    <span>
                        <em>¥</em>
                        <i>1.199.00</i>
                    </span>
                </div>
            </article>
            <section class="item-spec">
                <div class="item-spec-a">
                    <span class="spec-title">颜色选择</span>
                    <ul class="spec-info">
                        <li class="active">
                            <aside class="specs-item">
                                <h1 class="item-name">黑色</h1>
                            </aside>
                        </li>
                    </ul>
                </div>
            </section>
        </div>
    </section>
    <section class="goodsres">
        <div id="goods_box">
            <div class="title">
                <h4>相关推荐</h4>
            </div>
            <div class="box-inner">
                <ul>
                    <li>
                        <img src="images/shouxiebi.webp" alt="">
                        <div>
                            <h3>Smartisan智能手写笔</h3>
                            <h5>
                                尽情挥洒创造力
                            </h5>
                        </div>
                        <article class="item-price">
                            <span>￥199.00</span>
                            <span class="orignal-price">￥499.00</span>

                        </article>
                        <div class="activity-tag">
                            <span class="yellow">
                                直降
                            </span>
                        </div>
                        <div class="addcart">
                            <a href="#">加入购物车</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </section>

    <footer>
        <div class="footer_menu">
            <ul>
                <li>
                    <h3>订单服务</h3>
                    <div class="item-name">
                        <a target="_blank" href="#">购买指南</a>
                        <a target="_blank" href="#">送货政策</a>
                    </div>
                </li>
                <li>
                    <h3>服务支持</h3>
                    <div class="item-name">
                        <a target="_blank" href="#">自助服务</a>
                        <a target="_blank" href="#">维修门店</a>
                    </div>
                </li>
                <li>
                    <h3>媒体中心</h3>
                    <div class="item-name">
                        <a target="_blank" href="#">新闻动态</a>
                        <a target="_blank" href="#">官方视频</a>
                        <a target="_blank" href="#">图片资源</a>
                    </div>
                </li>
                <li>
                    <h3>关注我们</h3>
                    <div class="item-name">
                        <a target="_blank" href="#">新浪微博</a>
                        <a href="#">官方微信</a>
                        <a target="_blank" href="#">荣誉奖项</a>
                    </div>
                </li>
            </ul>
            <div class="footer-service">
                <h1 class="tel">
                    400 - 603 - 5000
                </h1>
                <h2 class="time">
                    周一到周日 9:00 - 18:00
                </h2>
                <h2 class="desc">
                    (仅收市话费)
                </h2>
                <div class="online">
                    <a target="_blank" href="#" class="">
                        <span>在线帮助</span>
                    </a>
                </div>
            </div>
        </div>
        <div class="footer-info">
            <ul class="copy">
                <li>Copyright © 2020 smartisan.com 版权所有</li>
                <li>
                    <a href="#" target="_blank">锤子商城隐私政策</a>
                </li>
                <li>
                    <a href="#" target="_blank">锤子商城用户协议</a>
                </li>
                <li>
                    <ahref="#" target="_blank">资质证照</a>
                </li>
            </ul>
            <ul class="icp">
                <li>
                    <a href="#" target="_blank">
                        京 ICP 备 19048576 号 - 1
                    </a>
                </li>
                <li class="police">
                    <a href="#" target="_blank">京公网安备 11010502039854号</a>
                </li>
                <li>
                    <a href="#" target="_blank">京食药网食备 202010031</a>
                </li>
            </ul>
        </div>
    </footer>
</body>

</html>
<script src="jquery/jquery.min.js"></script>
<script>
    $('.small').mouseover(function (e) {
        $('.big').css('display', 'block');
        $('.mask').css('display', 'block');
    })
    // 当鼠标在“缩略图”窗口中移动时
    $('.small').mousemove(function (e) {
        // 一、首先实现“放大镜”框跟随鼠标移动的功能（我们让鼠标处于“放大镜”框的中心）

        // 获取鼠标当前位置
        var pageX = e.pageX;
        var pageY = e.pageY;
        // 获取“缩略图”窗口在整个文档中的偏移位置
        var offsetX = $('.small').offset().left;
        var offsetY = $('.small').offset().top;
        // 计算鼠标在缩略图中的相对位置
        var relativeX = pageX - offsetX;
        var relativeY = pageY - offsetY;
        // 考虑到鼠标处于“放大镜”框的中心，我们要根据鼠标位置计算“放大镜”框的位置
        var magOffsetX = $('.mask').width() / 2;
        var magOffsetY = $('.mask').height() / 2;
        $('.mask').css({
            left: relativeX - magOffsetX + 'px',
            top: relativeY - magOffsetY + 'px'
        });
        // 获取“放大镜”框的新位置，后面会用到
        var magX = $('.mask').position().left;
        var magY = $('.mask').position().top;

        // 二、处理越界情况

        // 确定边界
        var maxMagX = $('.small').width() - $('.mask').width()
        var maxMagY = $('.small').height() - $('.mask').height()
        // 左边界
        if (magX <= 0) { $('.mask').css('left', '0px'); }
        // 右边界
        if (magX >= maxMagX) { $('.mask').css('left', maxMagX + 'px'); }
        // 上边界
        if (magY <= 0) { $('.mask').css('top', '0px'); }
        // 下边界
        if (magY >= maxMagY) { $('.mask').css('top', maxMagY + 'px'); }

        // 三、其次实现“原图”窗口中的图片随“放大镜”框的移动而相应移动

        // 按照之前确定的缩放比例移动“原图”窗口中的图片
        // 注意：图片的移动方向与鼠标的移动方向是相反的！
        var bigX = magX;
        var bigY = magY
        $('.big img').css({ left: -bigX + 'px', top: -bigY + 'px' });
    })
    // 当鼠标离开“缩略图”窗口时，隐藏“原图”窗口和“放大镜”框
    $('.small').mouseout(function () {
        $('.big').css('display', 'none');
        $('.mask').css('display', 'none');
    })
</script>